前言

賽事剩幾天就要完結了，最後幾篇文，我打算以「要寫 Vue 就會經常看到的框架或套件」為走向來寫。

自己轉職的第一份工作，寫的是 node.JS，極少碰到前端框架，同時我也想繼續把 Vue 學好。

當時使用的 node.JS 和 想要學習的 Vue，雖然不能直接放在同一條線上比較，但還是想知道，都能用來寫網頁的它們有什麼根本上的差別呢，以下拿MVC架構和MVVM架構來簡單說明。

MVC

把程式拆分為介面、資料、邏輯三層

M（Module） 資料
V（View） 頁面顯示
C（Controller）　　操作(操作邏輯)

1. view透過module呈現資料給user
2. user透過controller觸發事件
3. module接收事件調整DB
4. 調整完畢，再通知view更新頁面

MVVM

MVVM比起MVC更重視使用者端的介面、最主要差異是MVVM是用資料驅動view的更新。

M（Module） 資料
V（View） 頁面顯示
VM（viewModel） 中間層

1. view層透過viewModel的資料渲染頁面
2. view層接收頁面上的事件，給viewModel處理
3. viewModel呼叫module處理資料
4. module處理完資料後，呼叫viewModel更新資料
5. viewModel資料變動，觸發view更新畫面

在前端，M可以想成是js，V可以想成是html跟css，VM代表將js的數據和html串在一起的框架。

結論

• 在這邊的比較中，MVC相當於node.JS，MVVM相當於Vue
• MVC架構是較早發展的，注重在資料庫如何與前端邏輯分離。
• MVVM則是較注重，使用者如何操作前端資料。透過中間那層VM(前端資料)變更，來向兩邊(M&V)溝通。

個人覺得MVVM可能好於MVC的原因

MVC只有單向綁定 → 意即MVVM用資料綁定邏輯概念少了監聽之類的落落長的寫法

基於MVVM的Vue框架

除了前述好處，也可以複用component，寫起程式更加簡潔。

結語

要學習前，必須先訂定目標、還有搞懂自己到底在做什麼，才比較能有方向地、朝正確道路前進。

希望這篇文有正確地認識到兩種框架的差別。

今天就到這，如有說明不周或錯誤的地方，還請多留言討論(鞠躬)。

參考

MVC與MVVM差別
https://ithelp.ithome.com.tw/m/articles/10266737
https://front-chef.coderbridge.io/2021/02/27/mvc-mvvm/